<template>
	<div>
		<NavBar title="Todo" :rightTitle="isNavBarEdit ? '取消' : '操作'" @right="onClickRight" />
		<van-tabs 
			v-model="active"
			title-active-color="#ee0a24"
			title-inactive-color="#424242"
			sticky
			offset-top="2.875rem"
			@change="change"
		>
		  <van-tab 
				v-for="(item,index) in label"
				:key="index"
				:title="item.title"
			>
				<van-list
					v-model="item.loading"
					:finished="item.finished"
					:immediate-check="false"
					finished-text="没有更多了"
					@load="onLoad"
				>
					<list
						v-for="(single,i) in item.list"
						:key="i"
						:data="single"
						:isdisabled="isNavBarEdit"
						@collection="collection"
						@checked="checked"
						@edit="edit"
						@remove="remove"
					/>
				</van-list>
				
			</van-tab>
		</van-tabs>
		
		
		<van-popup 
			class="popup"
			v-model="show"
			position="bottom"
			round
			closeable
		>
			<p class="title">内容</p>
			<van-field 
				v-model="value" 
				placeholder="请输入内容" 
				type="textarea"
				maxlength="50"
				show-word-limit
				/>
			<van-picker
				show-toolbar
			  :columns="columns"
				:visible-item-count="2"
				@change="pickerChanged"
			>
				<template #default><div class="title">任务类型</div></template>
			</van-picker>
			
			<van-button block text="添加" type="info" @click.native="savaAdd" v-if="isAdd" />
			<van-button block text="修改" type="info" @click.native="savaEdit" v-else />
		</van-popup>
		
		<add-button @add-click="add" />
	</div>
</template>

<script>
	import { getList } from '@/api'
	import NavBar from '@/components/common/Navbar.vue'
	import List from '@/components/common/List.vue'
	import AddButton from '@/components/common/AddButton.vue'
	export default {
		name: "Home",
		data () {
			return {
				hasAllList: false,
				// 当前标签页
				active: 0,
				label: [
					{
						id: 0,
						title: '全部',
						page: 0,
						pagesize: 8,
						list: [],
						loading: false,
						finished: false
					},
					{
						id: 1,
						title: '已完成',
						page: 0,
						pagesize: 8,
						list: [],
						loading: false,
						finished: false
					},
					{
						id: 2,
						title: '未完成',
						page: 0,
						pagesize: 8,
						list: [],
						loading: false,
						finished: false
					}
				],
				// 全部list
				allList: [],
				show: false,
				value: null,
				columns: ['任务', '工作', '其他'],
				selectType: 0,
				itemId: null,
				isNavBarEdit: false,
				isAdd: false
			}
		},
		created() {
			this._getList()
		},
		methods: {
			// 获取数据
			_getList() {
				getList()
				.then(({data:res}) => {
					res.result.forEach(item => {
						item.done = Boolean(item.done)
						item.collection = Boolean(item.collection)
					})
					// 全部数据
					this.allList = res.result
					this.hasAllList = true
				})
			},
			// 获取已完成/未完成/全部
			_getListDone(page,pagesize,done) {
				console.log(page,pagesize,done)
				if (!this.label[this.active].finished) {
					// 加载中
					this.$toast.loading({
						message: '加载中...',
						forbidClick: true
					})
				}
				const data = this.filterData(done)
				const len = data.slice(page*pagesize,pagesize*(page+1)).length
				
				if (len) {
					setTimeout(() => {
						this.$toast.clear()
					},300)
				}
				// 老数据
				const oldData = this.label[this.active].list || []
				// 新老数据合并
				const newData = [...oldData,...data.slice(page*pagesize,pagesize*(page+1))]
				// 赋值
				this.label[this.active].list = newData
				// 判断是否还有数据
				if (len < this.label[this.active].pagesize) return this.label[this.active].finished = true
				this.label[this.active].loading = false
			},
			// 改变tba触发
			change() {
				if (this.label[this.active].finished) return
				const page = this.label[this.active].page
				const pagesize = this.label[this.active].pagesize
				if (this.active === 1) {
					this._getListDone(page,pagesize,true)
				}
				if (this.active === 2) {
					this._getListDone(page,pagesize,false)
				}
			},
			// 滚动加载滚动
			onLoad() {
				this.label[this.active].page +=1
				const page = this.label[this.active].page
				const pagesize = this.label[this.active].pagesize
				if (this.active === 0) {
					this._getListDone(page,pagesize,'all')
				}
				if (this.active === 1) {
					this._getListDone(page,pagesize,true)
				}
				if (this.active === 2) {
					this._getListDone(page,pagesize,false)
				}
			},
			// 过滤数据
			filterData(done) {
				if (done === 'all') {
					return this.allList
				} else {
					return this.allList.filter(item => {
						if (item.done == done) {
							return true
						}
					})
				}
			},
			// 收藏
			collection(item) {
				item.collection = !item.collection
			},
			// 按钮
			checked() {
				this.label.forEach(item => {
					item.page = 0
					item.list = []
					item.loading = false
					item.finished = false
				})
				this.active = 0
				const page = this.label[this.active].page
				const pagesize = this.label[this.active].pagesize
				this._getListDone(page,pagesize,'all')
			},
			// 选中类型
			pickerChanged(Picker) {
				const type = Picker.getIndexes()[0]
				this.selectType = type
			},
			// 编辑
			edit(item) {
				this.show = true
				this.isAdd = false
				this.value = item.title
				this.itemId = item.id
			},
			// 确定修改
			savaEdit() {
				var data = null
				this.allList.forEach(item => {
					if (item.id === this.itemId) {
						data = item
					}
				})
				
				data.title = this.value
				data.type = this.selectType
				this.show = false
			},
			// 导航栏右侧点击事件
			onClickRight() {
				this.isNavBarEdit = !this.isNavBarEdit
			},
			// 删除todo
			async remove(item) {
				const resultConfirm = await this.$dalog.confirm({
					message: '删除不可恢复',
				}).catch(err => err)
				if (resultConfirm !== 'confirm') return this.$toast('取消删除')
				
				this.label.forEach(item => {
					item.page = 0
					item.list = []
					item.loading = false
					item.finished = false
				})
				
				const id = item.id
				let currentIdIndex  = this.allList.findIndex(item => item.id == id)
				this.allList.splice(currentIdIndex,1)
				
				
				this.active = 0
				const page = this.label[this.active].page
				const pagesize = this.label[this.active].pagesize
				this._getListDone(page,pagesize,'all')
				
			},
			// 打开添加
			add() {
				this.show = true
				this.isAdd = true
				this.value = ''
			},
			savaAdd() {
				if (!this.value.trim()) return this.$toast('内容不能为空')
				this.allList.unshift({
					id: this.allList.length,
					title: this.value,
					done: 0,
					collection: 0,
					type: this.selectType
				})
				
				this.label.forEach(item => {
					item.page = 0
					item.list = []
					item.loading = false
					item.finished = false
				})
				
				this.active = 0
				const page = this.label[this.active].page
				const pagesize = this.label[this.active].pagesize
				this._getListDone(page,pagesize,'all')
				
				this.show = false
			}
		},
		watch: {
			hasAllList() {
				const page = this.label[this.active].page
				const pagesize = this.label[this.active].pagesize
				this._getListDone(page,pagesize,'all')
			}
		},
		components: {
			NavBar,
			List,
			AddButton
		}
	}
</script>

<style lang="scss" scoped>
	.popup{
		padding: 12px;
		box-sizing: border-box;
		.title{
			color: #646566;
			font-size: 14px;
			padding: 0 16px;
			text-align: center;
		}
		/deep/ .van-picker__toolbar{
			justify-content: center;
		}
	}
</style>